<template>
	<view class="meetingPage">
		<view class="meetingPage-head">
			<Search v-model="requestParams.query" @onConfirm="onConfirm" @onIcon="onFilter" placeholder='关键字/词/工单号'>
			</Search>
		</view>
		<view class="meetingPage-body">
			<scroll-view class="scroll" @scrolltolower="OnDrawUpLoad" :bounces="false" enhanced scroll-y enable-back-to-top>

				<view v-show="!ShowEmpty" class="card-wrapper" v-for="(item) in data" :key="item.id" @click="onItem(item)">
					<view class="card-wrapper-head">
						<view span="10" class="left" :style="[workOrderEmergencyLevelStyle(item.degree)]">
							<span class="level">
								{{item.degree | degree}}
							</span>
						</view>
						<view class="center">
							<span class="orderNo">
								{{item.orderNum}}
							</span>
						</view>
						<view span="2" class="right">
							<span class="state" :style="[workOrderStateColor(item.currState)]">
								{{item.currStateToName}}
							</span>
						</view>
					</view>
					<view>
						<view span="12">
							<h5 class="card-wrapper-title">
								{{item.faultRemark |deleteHTMLTag }}
							</h5>
						</view>
					</view>
					<view class="card-wrapper-body">
						<view span="11" class="left">
							<ul class="info">
								<li class="info-item">
									<span class="info-item-label">报修人</span>
									<span class="info-item-value">{{item.createUserToName || '-'}}</span>
								</li>
								<li class="info-item">
									<span class="info-item-label">报修时间</span>
									<span class="info-item-value"> {{item.createTime}}</span>
								</li>
								<li class="info-item">
									<span class="info-item-label">报修科室</span>
									<span class="info-item-value">{{item.deptId | subject}}</span>
								</li>
								<li class="info-item">
									<span class="info-item-label">报修电话</span>
									<span class="info-item-value">{{item.phone || ''}}</span>
								</li>
							</ul>
						</view>
						<view span="1" class="right">
							<u-icon name="arrow-right" color="#98A5B3" size="28"></u-icon>
						</view>
					</view>
				</view>
				<u-empty v-show="ShowEmpty" text="暂无数据"></u-empty>

			</scroll-view>
		</view>

	</view>
</template>

<script>
	import Search from '@/components/input/index.vue'
	import { workOrderStateColor, workOrderEmergencyLevelStyle } from './state.js'
	import { Storage_UserInfo } from '@/common/index.js'
	export default {
		components: {
			Search
		},
		filters: {
			textOmit(val) {
				let strArr = val.split(',') || []
				let max = 3
				if (strArr.length > max) {
					let num = strArr.length - max + 1
					// +'...'+ strArr.length - 4 +'人'
					return `${strArr.slice(0,max).toString()},...等${num}人`
				}
				return val
			}
		},
		data() {
			return {
				data: [],
				requestParams: {
					pageSize: 20,
					pageNum: 1,
				},
				responseParams: null,
			}
		},
		onLoad(params) {
			console.log(params, 'params----pages-order-search')
			if (params?.query) {
				Object.assign(this.requestParams, JSON.parse(params?.query))
			}
			this.initData()
		},
		computed: {
			ShowEmpty() {
				return !this.data.length
			}
		},
		methods: {
			workOrderStateColor,
			workOrderEmergencyLevelStyle,
			//上拉加载
			OnDrawUpLoad(ev) {
				console.log('触发---OnDrawUpLoad--OnDrawUpLoad', ev)
				this.requestParams.pageNum += 1
				this.initData()
			},
			//输入框键盘确认时间
			onConfirm() {
				this.requestParams.pageNum = 1
				this.requestParams.pageSize = 20
				this.data = []
				console.log('onConfirm', this.requestParams)
				this.initData()
			},
			// 输入框 筛选事件
			onFilter() {
				wx.navigateTo({
					url: '/pages/order/searchFilter'
				})
			},
			//初始化
			initData() {
				wx.showLoading({
					title: '加载中...',
					complete: () => {
						console.log('completecompletecomplete')
					}
				})
				if (this.responseParams?.total) {
					console.log(this.data.length, this.responseParams.total)
					if (this.data.length === this.responseParams.total) {
						wx.showToast({
							title: '暂无数据',
							icon: 'none'
						})
						return
					}
				}
				let { id } = Storage_UserInfo()
				this.$set(this.requestParams, 'makeUser', id)

				this.$pop.ajaxPost('/busOrderFault/getSearchPage', this.requestParams).then((res) => {
					if (res.code === 0) {
						let list = res.body.list || []
						if (list.length) {
							this.data = [...this.data, ...list]
							wx.hideLoading()
							this.responseParams = {
								total: res.body.total
							}

						} else {
							wx.hideLoading();
							wx.showToast({
								title: '暂无数据',
								icon: 'none'
							})
						}
					} else {
						console.log('----else-----')
						wx.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				}).catch((err) => {
					console.log('-----catch-----')
					wx.hideLoading()
				})

			},
			onItem(item) {
				wx.navigateTo({
					url: `/pages/myOrder/detail?orderNum=${item.orderNum}&isReview=${item.isReview || false}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.meetingPage {
		height: 100vh;
		background-color: #F0F3F7;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		&-head {}

		&-body {
			height: 1rpx;
			flex: 1;
			padding: 0 30rpx;

			>.scroll {
				height: 100%;
				padding-bottom: 60rpx;
			}
		}
	}

	.card {

		&-wrapper {
			margin-top: 30rpx;
			background-color: #fff;
			box-shadow: 0 30rpx 18rpx -14rpx #E6EBF2;
			border-radius: 20rpx;
			overflow: hidden;

			&-head {
				height: 68rpx;
				line-height: 68rpx;
				border-bottom: 2rpx solid #F5F7FA;
				display: flex;

				>.left {
					width: 20%;
					flex-basis: 20%;
					text-align: center;
					border-right: 2rpx solid #F5F7FA;

					>.level {
						font-weight: 400;
						font-size: 28rpx;
					}
				}

				>.center {
					width: 60%;
					flex-basis: 60%;
					padding-left: 20rpx;

					>.orderNo {
						font-weight: 400;
						font-size: 28rpx;
						color: #98A5B3;
					}
				}

				>.right {
					flex: 1;
					text-align: center;

					>.state {
						font-weight: 600;
						font-size: 28rpx;
					}

				}
			}

			&-title {
				padding-left: 20rpx;
				font-weight: 600;
				font-size: 34rpx;
				color: #0F2E4D;
				margin: 30rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			&-body {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				padding-left: 20rpx;

				>.left {
					width: 90%;
					flex-basis: 90%;
				}

				>.right {
					flex: 1;
					align-items: center;
					display: flex;
					justify-content: center;
					padding-bottom: 60rpx;
				}
			}

		}

	}

	.info {
		&-item {
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: row;

			&-label {
				font-weight: 400;
				font-size: 28rpx;
				color: #98A5B3;
				width: 120rpx;
				flex-basis: 120rpx;

			}

			&-value {
				font-weight: 400;
				font-size: 28rpx;
				margin-left: 20rpx;
				color: #0F2E4D;
				flex: 1;
			}
		}
	}
</style>
